Gem@ BLOG

Imagen decorativa en los comentarios

Hace pocos días recibí un comentario de Markos, me decía que había copiado una idea de mi blog para adaptarla al suyo, pero con algunas modificaciones.
Visité el blog de Markos, y me gustó esa modificación que comentaba. Se trataba de la imagen que aparece en la cabecera de los comentarios que dicho sea de paso yo copié de la plantilla Red White Template

Tenía pendiente crear una entrada explicando como añadir una imagen en la cabecera pero al ver la imagen de Markos una lucecita se encendió en mi cabeza. Pensé que sería una buena idea crear varias imágenes para añadir a los comentarios.
¿Quién podía crear esas imágenes?
!Pues Markos que domina a la perfección el Photoshop¡
Su respuesta no se hizo esperar, las imágenes son geniales:

En conversación con Markos decidimos (mejor dicho, decido) que será Markos quien creará esa entrada y de paso dar a conocer sus imágenes.
Los pasos a seguir son muy sencillos, nos situamos en plantilla Edición de HTML sin necesidad de expandir la plantilla y buscamos:

.comment-author {

A continuación añadimos:
background:transparent url(aquí-URL-de-la-imagen) top no-repeat;

Si ya lo tenemos porque en su día añadimos color en los comentarios lo que haremos será sustituir el color por la url de la imagen.

Nos quedaría algo así:

.comment-author {
background:transparent url(url_de_la_imagen) top no-repeat;
margin:.5em 0 0;
padding:13px 10px 20px 110px;
font-weight:bold;
text-align: center;
color:#000000;
}